<template>
	<view class="home-container">
		<view class="top-header">
			<view class="top-content">
				<!-- 顶部信息 -->
				<view class="top-head">
					<view class="t-left flex align-center" v-if="currencyType=='usdt'">
						今日汇率：
						<up-text :text="usdtRate" color="#aaff7f" size="21"></up-text>
					</view>
					<view class="t-left flex align-center" v-if="currencyType=='cny'">
						<!-- 今(昨)红利：
						<up-text :text="todayProfite" color="#aa0000" size="21"></up-text>
						(<up-text :text="yesterdayProfite" color="#ffaa00" size="21"></up-text>) -->
					</view>

					<view class="t-logo">
						<u-image class="logo" src="../static/logo.png" width="60px" height="60px"
							mode="widthFix"></u-image>
					</view>
					<view class="t-right">
						<view class="action" @click="showKfModal = true">
							<uni-icons custom-prefix="iconfont" type="icon-htmal5icon31" color="#ffffff"
								size="18"></uni-icons>
							<text>客服</text>
						</view>
					</view>
				</view>

				<!-- 顶部用户基本信息 -->
				<view class="top-body">
					<view class="base-box">
						<up-avatar :src="avatar" size="60"></up-avatar>
						<view class="main">
							<view class="info">
								<view class="info-base">
									<view class="name">
										欢迎 <text>{{name}}</text>
									</view>
									今/昨红利：<up-tag size="small" :text="getTodayProfit" type="warning"></up-tag> / <up-tag size="small"
										:text="getYesterdayProfit" type="info"></up-tag>
								</view>
								<view :class="['status',{success:!!phonenumber}]"><text>{{!!phonenumber ? '已认证':'待认证'}}</text></view>
							</view>
							<!-- <view class="label">
								今日红利
							</view>
							<view class="value">
								<up-count-to :startVal="0" :duration="1000" :endVal="accountInfo?.balance / 100"
									separator="," :decimals="2"></up-count-to>
								<text>币</text>
							</view> -->
							<view class="yue">
								<up-button @click="toRecharge" type="success" shape="circle" size="normal" :plain="true"
									:hairline="true" text="我要充值"></up-button>
								<up-button @click="toWithdrawal" type="primary" shape="circle" size="normal" :plain="true"
									:hairline="true" text="我要提现"></up-button>
							</view>
						</view>
					</view>
					<!-- <view class="money flex">
						<view class="label">
							信用账户ID
						</view>
						<view class="value">
							{{accountInfo?.id}}
						</view>
						<view class="copy">
							<up-copy :content="accountInfo?.id">
								<uni-icons custom-prefix="iconfont" type="icon-copy" color="#333" size="18"></uni-icons>
							</up-copy>
						</view>
					</view> -->
				</view>
				<view class="top-footer">
					<block v-for="(item,idx) in moneyTyes" :key="item.key">
						<view class="item">
							<view class="label">
								{{item.label}}
							</view>
							<view class="value">
								<up-count-to :startVal="0" :duration="1000" :endVal="item.value" :decimals="2"
									separator=","></up-count-to>
								<text><!-- {{ currencyUnit }} --></text>
							</view>
						</view>

						<up-line direction="col" length="80rpx" v-if="idx < moneyTyes.length - 1"></up-line>
					</block>
				</view>
			</view>
		</view>

		<view class="main-content">
			<view class="main-header">
				<view class="title">
					任务大厅
				</view>
				<view class="filter">
					<view class="filter-item">
						<text>出货</text>
						<up-switch v-model="orderType.shipping" asyncChange @change="asyncChange($event,'shipping')"
							size="20"></up-switch>
					</view>
					<view class="filter-item">
						<text>进货</text>
						<up-switch v-model="orderType.purchase" asyncChange @change="asyncChange($event,'purchase')"
							size="20"></up-switch>
					</view>
				</view>
			</view>

			<view class="main-list">
				<scroll-view class="list-wrap" v-if="phonenumber" :scroll-y="true">
					<template v-if="formatOrderList.length > 0">
						<geek-order-item :item="item" v-for="item in formatOrderList" :key="item.id"
							@updateStatus="updateStatus($event,item)"></geek-order-item>
					</template>

					<up-empty v-else mode="order" :text="emptyText" icon="/static/images/empty/order.png"></up-empty>
				</scroll-view>

				<view class="bind-phone" v-else>
					<uni-icons custom-prefix="iconfont" type="icon-shouji" color="#0055ff" size="36"></uni-icons>
					<text class="txt">请先设定手机号</text>
					<up-button text="绑定手机" @click="bingModal = true"
						color="linear-gradient(to right, rgb(0, 85, 255), rgb(0, 170, 255))"></up-button>
				</view>
			</view>
		</view>
	</view>

	<!-- 最新公告 -->
	<up-modal class="notice-modal" :show="showModal" :title="noticeTitle" confirmText="关闭公告" confirmColor="#ff0000"
		closeOnClickOverlay @close="closeModal" @confirm="closeModal">
		<view class="slot-content">
			<view class="content">
				{{noticeContent}}
			</view>

			<view class="ads">
				<image src="/static/images/banner/banner.jpg" mode="widthFix"></image>
			</view>
		</view>
	</up-modal>

	<!-- 在线客服 -->
	<up-modal class="kefu-modal" :show="showKfModal" showCancelButton title="联系客服" confirmText="在线客服" cancelText="关闭" 
	confirmColor="#ff0000" @cancel="closeKfModal" @confirm="openCustomerService">
		<view class="slot-content">
			<view class="content">
				竭诚为您服务，我们提供以下服务方式：
				<view class="flex align-center margin-top">
					<uni-icons custom-prefix="iconfont" type="icon-QQ" color="#333" size="18"></uni-icons>
					<text style="margin-right: 20rpx;">QQ：{{customerServiceQq}}</text>
					<up-copy :content="customerServiceQq">
						<uni-icons custom-prefix="iconfont" type="icon-copy" color="#333" size="18"></uni-icons>
					</up-copy>
				</view>
				<view class="flex align-center margin-top">
					<uni-icons custom-prefix="iconfont" type="icon-telegram" color="#333" size="18"></uni-icons>
					<text style="margin-right: 20rpx;">Telegram：{{customerServiceTelegram}}</text>
					<up-copy :content="customerServiceTelegram">
						<uni-icons custom-prefix="iconfont" type="icon-copy" color="#333" size="18"></uni-icons>
					</up-copy>
				</view>
			</view>
		</view>
	</up-modal>

	<!-- 绑定手机 -->
	<up-modal class="bind-modal" :show="bingModal" title="绑定手机" :showConfirmButton="false" closeOnClickOverlay
		@close="closebindModal" @confirm="closebindModal">
		<view class="slot-content">
			<view class="form-wrap">
				<view class="form-group">
					<uni-forms ref="formRef" :rules="rules" :modelValue="formData" validate-trigger="blur"
						err-show-type="toast" label-position="top">

						<uni-forms-item label="手机号" name="phone">
							<uni-icons custom-prefix="iconfont" type="icon-shouji" color="#999" size="18"></uni-icons>
							<uni-easyinput v-model="formData.phone" type="digit" maxlength="11" :inputBorder="false"
								clearSize="18" trim="all" placeholder="请输入手机号码" />
						</uni-forms-item>

						<!-- <view class="code-box flex">
							<uni-forms-item label="验证码" name="code">
								<uni-icons custom-prefix="iconfont" type="icon-code" color="#999" size="18"></uni-icons>
								<uni-easyinput v-model="formData.code" type="digit" maxlength="6" :inputBorder="false"
									clearSize="18" trim="all" placeholder="请输入验证码" />

								<view class="login-code">
									<up-code :seconds="seconds" ref="uCodeRef" @change="codeChange"></up-code>
									<up-button @tap="getCode" shape="circle">{{tips}}</up-button>
								</view>
							</uni-forms-item>
						</view> -->
					</uni-forms>
				</view>

				<view class="form-btn-box">
					<up-button text="绑定手机" type="round" @click="submit('form')" shape="circle"
						color="linear-gradient(to right, rgb(0, 85, 255), rgb(0, 170, 255))"></up-button>
				</view>
			</view>
		</view>
	</up-modal>

	<geek-upgrade :type="upgradeType" :version="version" :url="upgradeUrl" title="发现新版本!" :content="upgradeContent"
		ref="upgrade"></geek-upgrade>
</template>
<script setup>
	import _ from 'lodash'
	import config from '@/config';
	import store from '@/store'
	import {
		ref,
		reactive,
		computed,
		watch
	} from 'vue';

	import {
		getCodeByPhone,
		bindPhone
	} from '@/api/login'
	import {
		latestPurchaseOrders,
		latestShippingOrders,
		cashierSwitch,
		purchaseSwitch,
		getProfitStat
	} from '@/api/home'
	import {
		getToken
	} from '@/utils/auth'
	import {
		modal
	} from '@/plugins'
	import {
		getNoticeList
	} from '@/api/system/user'
	import { bindCid4UniCloud } from '@/api/seller/info'
	import {
		onLoad,
		onUnload,
		onShow,
		onPullDownRefresh
	} from '@dcloudio/uni-app';
	
	//import * as bytedesk from '@/components/bytedesk_kefu/js/api/bytedesk.js'
	
	const timer = ref(null)
	const showModal = ref(false)
	const noticeTitle = ref('最新公告')
	const noticeContent = ref('')
	const showKfModal = ref(false)
	const bingModal = ref(false)

	const upgrade = ref(null)
	const version = ref('')
	const upgradeType = ref('pkg') //pkg 整包 wgt 升级包
	const upgradeContent = ref('') //更新内容
	const upgradeUrl = ref('') //更新地址
	const todayProfit = ref(0)
	const yesterdayProfit = ref(0)
	//seller 账户信息
	const sellerInfo = computed(() => {
		return store.state.user?.seller || {}
	})

	const orderType = reactive({
		purchase: !!sellerInfo.value?.purchaseSwitch,
		shipping: !!sellerInfo.value?.cashierSwitch
	})

	watch(() => sellerInfo.value, () => {
		orderType.purchase = !!sellerInfo.value?.purchaseSwitch
		orderType.shipping = !!sellerInfo.value?.cashierSwitch
	})

	const uCodeRef = ref(null)
	const formRef = ref(null)

	const orderList = ref([])

	const formatOrderList = computed(() => {
		const keys = _.keys(_.pickBy(orderType, vo => !!vo))
		return orderList.value.filter(vo => keys.includes(vo.type))
	})

	const avatar = ref(store.state.user.avatar);
	const name = ref(store.state.user.name);


	const seconds = ref(60)
	const tips = ref('获取验证码')
	const formData = reactive({
		phone: '',
		code: '9999'
	})
	const rules = {
		phone: {
			rules: [{
				required: true,
				errorMessage: '请输入手机号码'
			}, {
				pattern: '^1[3-9]\\d{9}$',
				errorMessage: '手机号码格式错误'
			}]
		}
		// code: {
		// 	rules: [{
		// 		required: true,
		// 		errorMessage: '请输入验证码'
		// 	}]
		// }
	}

	const token = computed(() => {
		return getToken()
	})

	const emptyText = computed(() => {
		return _.some(_.values(orderType)) ? '接单中' : '未开启接单'
	})

	//绑定手机号码
	const phonenumber = computed(() => {
		return store.state.user?.user?.phonenumber || ''
	})

	//下发钱包地址
	const rechargeWallet = computed(() => {
		return store.state.user?.appInfo?.rechargeWallet || ''
	})

	//qq信息
	const customerServiceQq = computed(() => {
		return store.state.user?.appInfo?.customerServiceQq || ''
	})

	//Telegram信息
	const customerServiceTelegram = computed(() => {
		return store.state.user?.appInfo?.customerServiceTelegram || ''
	})

	const currencyUnit = computed(() => {
		return store.state.user?.appInfo?.settleCurrencyUnit || ''
	})

	const currencyType = computed(() => {
		return store.state.user?.appInfo?.settleCurrencyType || ''
	})

	const usdtRate = computed(() => {
		return store.state.user?.appInfo?.settleCurrencyRate || ''
	})

	const getTodayProfit = computed(() => {
		return todayProfit.value / 100;
	})

	const getYesterdayProfit = computed(() => {
		return yesterdayProfit.value / 100;
	})

	const getTitle = computed(() => {
		let title = ''
		if (store.state.user?.appInfo?.settleCurrencyType == 'cny') {
			title = '今日红利：'
		} else {
			title = '今日汇率：';
		}
		return title || ''
	})

	//accountInfo 账户信息
	const accountInfo = computed(() => {
		return store.state.user?.account || {}
	})

	// 出货
	const shippingAmount = computed(() => {
		return store.state.user?.sellerAll?.shippingAmount || 0
	})

	const isNewOrder = computed(() => {
		return store.state.user.isNewOrder || false
	})
	
	const updateList = computed(() => {
		return store.state.user.updateList || false
	})

	function toRecharge() {
		uni.navigateTo({
			url: '/pages_mine/pages/recharge/index'
		})
	}

	function toWithdrawal() {
		uni.navigateTo({
			url: '/pages_mine/pages/withdrawal/index'
		})
	}

	function fetchAppInfo() {
		if (timer.value) {
			clearInterval(timer.value)
			timer.value = null
		}

		store.dispatch('AppInfo')

		timer.value = setInterval(() => {
			store.dispatch('AppInfo')
		}, 5 * 60 * 1000) //5分钟执行一次
	}

	const moneyTyes = computed(() => {
		const types = [{
				key: 'balance',
				label: '可用'
			},
			{
				key: 'unBalance',
				label: '不可用'
			},
			{
				key: 'frozeAmount',
				label: '冻结'
			},
			{
				//shippingAmount
				key: 'profitBalance',
				label: '红利余'
			}
		]
		return _.map(types, vo => {
			if (vo.key !== 'shippingAmount') {
				return {
					...vo,
					value: Number(accountInfo.value[vo.key] || 0) / 100
				}
			} else {
				return {
					...vo,
					value: Number(shippingAmount.value || 0) / 100
				}
			}
		})
	})

	function init() {
		if (token.value) {
			getFirstNoticeList();
			getLatestOrders();
			//initWebsoket();
			fetchAppInfo();
			store.dispatch('SellerInfo')
			// 背景音 /static/music/y1971.mp3
			const url = "/static/music/y1971.mp3";
			if (store.state.backgroundMusic == null) {
				store.dispatch('backgroundMusicInit', url);
			}
		}
	}

	//初始化sokect
	function initWebsoket() {
		if (store.state.socketTask == null) {
			store.dispatch('websocketInit')
		}
	}

	//监听是否登录
	watch(() => token.value, () => {
		init()
	})

	//监听是否绑定手机
	watch(() => phonenumber.value, () => {
		getLatestOrders()
	})

	//监听订单是否更新
	watch(() => isNewOrder.value, (val) => {
		if (val) {
			getLatestOrders()
		}
	})
	
	watch(() => updateList.value, (val) => {
		if (val) {
			getLatestOrders()
		}
	})

	//关闭公告弹窗
	function closeModal() {
		showModal.value = false
		uni.showTabBar()
	}

	// 关闭客服弹窗
	function closeKfModal() {
		showKfModal.value = false
	}
	
	function openCustomerService() {
		uni.navigateTo({
			url: '/pages/customer/service'
		})
	}

	// 出货进货开关处理
	function asyncChange(val, key) {
		const newKey = key == 'purchase' ? 'purchaseSwitch' : 'cashierSwitch'
		store.dispatch('switchPurchaseAndCashier', {
			value: val,
			key: newKey
		}).catch((code) => {
			if (key == 'shipping') {
				if (code === 998) {
					uni.showModal({
						title: '系统提示',
						content: '您还没有配置收款账户，请先配置？',
						cancelText: '暂不配置',
						confirmText: '立即配置',
						success: function(res) {
							if (res.confirm) {
								uni.navigateTo({
									url: '/pages/account/add'
								})
							}
						}
					})
				}

				if (code === 999) {
					uni.showModal({
						title: '系统提示',
						content: '您当前账户余额不足，限制接单，请先充值？',
						cancelText: '暂不充值',
						confirmText: '立即充值',
						success: function(res) {
							if (res.confirm) {
								uni.navigateTo({
									url: '/pages_mine/pages/recharge/index'
								})
							}
						}
					})
				}
			}
		})
	}

	//获取最新公告的第一条数据
	function getFirstNoticeList() {
		getNoticeList().then(res => {
			const current = _.first(res?.rows || []) || {}
			noticeTitle.value = current?.noticeTitle || ''
			noticeContent.value = current?.noticeContent || ''
			if (noticeTitle.value) {
				showModal.value = true
				uni.hideTabBar()
			}
		})
	}

	//获取任务大厅订单列表数据
	function getLatestOrders() {
		if (phonenumber.value) {
			const purchaseOrders = latestPurchaseOrders().then(({
				data
			}) => {
				return _.map(data || [], vo => {
					return {
						...vo,
						type: 'purchase',
						icon: 'icon-tianjinhuodan',
						typeName: '进货'
					}
				})
			})

			const shippingOrders = latestShippingOrders().then(({
				data
			}) => {
				return _.map(data || [], vo => {
					return {
						...vo,
						type: 'shipping',
						icon: 'icon-chuhuodingdan',
						typeName: '出货'
					}
				})
			})

			Promise.all([purchaseOrders, shippingOrders])
				.then((data) => {
					orderList.value = _.flattenDeep(data || []) || []
				})
				.catch((err) => {
					console.log('出错了', err)
				}).finally(() => {
					store.commit('SET_NEWORDER')
				})
		}
	}

	function updateStatus(val, item) {
		item.status = val
		// getLatestOrders()
	}

	/******************************手机绑定处理*******************************/
	// 提交绑定
	function submit(ref) {
		formRef.value.validate((err, value) => {
			console.log(err, value);
			if (!err) {
				bindPhone(formData.phone, formData.code).then(({
					data
				}) => {
					store.commit('SET_USER', {
						phonenumber: formData.phone
					})
					bingModal.value = false
				})
			}
		})
	}

	// 获取短信验证码
	function getCode() {
		if (formData.phone) {
			if (uCodeRef.value.canGetCode) {
				// 模拟向后端请求验证码
				uni.showLoading({
					title: '正在获取验证码',
				});

				getCodeByPhone(formData.phone).then(res => {
					console.log(res, 'res')
					// const {
					// 	data
					// } = res;
					// this.captchaEnabled = data.captchaEnabled === undefined ? true : data.captchaEnabled
					// if (this.captchaEnabled) {
					// 	this.codeUrl = 'data:image/gif;base64,' + data.img
					// 	this.formData.uuid = data.uuid
					// }
					uni.hideLoading();
					modal.msg('验证码已发送');
					uCodeRef.value.start();
				}).catch((err) => {
					console.log(err, 'err')
					uni.hideLoading();
				})
			} else {
				modal.msg('倒计时结束后再发送');
			}
		} else {
			modal.msg('请输入手机号码')
		}
	}

	// 获取验证码处理			
	function codeChange(text) {
		tips.value = text;
	}

	// 关闭绑定弹窗
	function closebindModal() {
		bingModal.value = false
	}

	function handleBuilding() {
		uni.showToast({
			title: '模块建设中~',
			mask: false,
			icon: "none",
			duration: 1000
		});
	}

	function checkVersion(forceUpdate = false) {
		// 获取版本信息
		// #ifdef APP-PLUS
		console.log('checkVersioncheckVersion')
		plus.screen.lockOrientation('portrait-primary') // 竖屏锁定
		plus.runtime.getProperty(plus.runtime.appid, (widgetInfo) => {
			uni.request({
				url: config.baseUrl + '/seller/upgrade?_t=' + new Date().getTime(), //版本检测
				data: {},
				header: {},
				success: (result) => {
					if (result.data.code === 200) {
						// widgetInfo.version
						const installPackage = _.get(result.data, 'data', {}) || {}
						if (installPackage.version - widgetInfo.versionCode >
							0) { // 如果最新版本大于现在已经安装的App的版本
							upgradeType.value = 'pkg'
							version.value = `v${_.get(installPackage, 'name', '')}`
							upgradeContent.value = _.get(installPackage, 'remark', '')
							upgradeUrl.value = _.get(installPackage, 'downloadUrl', '')
							upgrade.value.show()
						}
					}
				}
			})
		})
		// #endif
	}

	//下拉刷新
	onPullDownRefresh(() => {
		if (token.value) {
			getLatestOrders();

			store.dispatch('SellerInfo').finally(() => {
				uni.stopPullDownRefresh()
				store.dispatch('AppInfo')
			})
		}
	})

	onLoad(() => {
		if (token.value) {
			getFirstNoticeList();
			//initWebsoket();
			fetchAppInfo();
			// 背景音
			const url = "/static/music/y1971.mp3";
			if (store.state.backgroundMusic == null) {
				store.dispatch('backgroundMusicInit', url);
			}
			//绑定cid 2.0
			uni.getPushClientId({
				success: (res) => {
					let push_clientid = res.cid
					console.log('客户端推送标识:',push_clientid)
					if(push_clientid) {
						bindCid4UniCloud(push_clientid).then(res=>{
							console.log(JSON.stringify(res));
						})
					}
				},
				fail(err) {
					console.log(err)
				}
			});
		}
		console.log('onLoadonLoad')
		// #ifdef APP-PLUS
		checkVersion()
		// #endif
	});

	onUnload(() => {
		//store.dispatch('websocketClose')
		if (timer.value) {
			clearInterval(timer.value)
			timer.value = null
		}
	})

	onShow(() => {
		if (token.value) {
			//todayProfite.value = 100;
			getLatestOrders()
			getProfitStat().then(res => {
				//console.log(res.data.todayProfit)
				todayProfit.value = res.data.todayProfit;
				yesterdayProfit.value = res.data.yesterdayProfit;
			})
			store.dispatch('SellerInfo')
			//initWebsoket()
		}
	});
</script>

<style lang="scss" scoped>
	.home-container {
		display: flex;
		flex-direction: column;
		/* #ifdef H5 */
		min-height: calc(100vh - var(--window-bottom) - var(--status-bar-height) - var(--window-top));
		/* #endif */

		/* #ifndef H5 */
		min-height: 100vh;
		/* #endif */
	}

	.top-header {
		width: 100%;
		padding: 30rpx 30rpx 20rpx;
		box-sizing: border-box;
		position: relative;
		background-color: #fff;

		&::before {
			width: 100%;
			height: 300rpx;
			display: block;
			position: absolute;
			left: 0;
			top: 0;
			background-color: #2979ff;
			z-index: 0;
			content: "";
		}

		.t-left {
			color: #fff;
		}

		.top-content {
			position: relative;
			z-index: 1;
		}

		.top-head {
			display: flex;
			align-items: center;
			justify-content: space-between;
			width: 100%;
			padding: 30rpx 0;

			.action {
				display: flex;
				flex-direction: column;
				color: #fff;
				cursor: pointer;

				text {
					color: #fff;
					font-size: 24rpx;
					margin-top: 6rpx;
				}
			}
		}

		.top-body {
			background-color: #fff;
			display: flex;
			border-radius: 10rpx;
			box-shadow: 0rpx 0rpx 16rpx #c2c2c2;
			display: flex;
			flex-direction: column;
			padding: 24rpx;

			.base-box {
				display: flex;
				align-items: center;

				&::v-deep {
					.u-avatar {
						margin-right: 24rpx;
					}
				}

				.main {
					flex: 1;
					overflow: hidden;
					display: flex;
					flex-direction: column;

					.info {
						display: flex;
						align-items: flex-start;
						justify-content: space-between;

						.info-base {
							.name {
								font-weight: 600;
								font-size: 30rpx;
								margin-bottom: 10rpx;
							}

							&::v-deep {
								.u-tag {
									font-size: 24rpx;
									padding: 6rpx 10rpx;
									line-height: 24rpx;
								}
							}
						}

						.status {
							background-color: #ff0000;
							padding: 8rpx 20rpx;
							border-radius: 50rpx 0 0 50rpx;
							font-size: 24rpx;
							color: #fff;

							&.success {
								background-color: #00aa00;
							}
						}
					}

					.yue {
						display: flex;
						align-items: center;
						// margin-top: 10rpx;
						// justify-content: space-between;
						margin-top: 15rpx;

						button {
							width: 180rpx;
							margin: 0;

							&+button {
								margin-left: 40rpx;
							}
						}

						.label {
							font-size: 28rpx;
							font-weight: 500;
						}

						.value {
							color: #3c9cff;

							&::v-deep {
								.u-count-num {
									font-size: 32rpx !important;
									font-weight: 600 !important;
									color: #3c9cff !important;
								}
							}

							&>text {
								margin-left: 8rpx;
								font-size: 24rpx;
							}
						}
					}
				}
			}

			.money {
				justify-content: space-between;
				align-items: center;
				padding: 6rpx 10rpx;
				background-color: #efefef;
				border-radius: 8rpx;
				margin-top: 18rpx;
				color: #666;

				.value {
					flex: 1;
					margin: 0 10rpx;
					text-align: center;
				}
			}
		}

		.top-footer {
			display: flex;
			align-items: center;
			justify-content: center;
			margin-top: 20rpx;

			.item {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				// width: 25%;
				padding: 0 20rpx;
				flex: 1;

				.label {
					margin-bottom: 10rpx;
				}

				.value {
					display: flex;
					align-items: baseline;

					&::v-deep {
						.u-count-num {
							font-size: 32rpx !important;
							font-weight: 600 !important;
							color: #333 !important;
						}

						&>text {
							color: #999;
							font-size: 24rpx;
							margin-left: 10rpx;
							white-space: nowrap;
						}
					}
				}
			}
		}
	}

	.notice-modal {
		&::v-deep {
			.u-modal__title {
				padding-top: 30rpx;
			}

			.u-modal__content {
				padding: 30rpx !important;
				overflow: hidden !important;

				.slot-content {
					width: 100%;

					.content {
						text-indent: 2em;
						line-height: 38rpx;
						color: #5e5e5e;
						max-height: 40vh;
						overflow-y: auto;
					}
				}

				.ads {
					vertical-align: top;
					margin-top: 20rpx;
				}
			}
		}
	}

	.main-content {
		flex: 1;
		overflow: hidden;
		margin: 20rpx;
		background-color: #fff;
		border-radius: 10rpx;
		padding: 30rpx 26rpx;
		display: flex;
		flex-direction: column;

		.main-header {
			padding-bottom: 24rpx;
			border-bottom: 1rpx solid #f1f1f1;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.title {
				font-size: 30rpx;
				font-weight: 800;
				color: #222222;
			}

			.filter {
				display: flex;
				align-items: center;

				.filter-item {
					display: flex;
					align-items: center;
					margin-left: 24rpx;

					&>text {
						margin-right: 10rpx;
						font-size: 26rpx;
						color: #232323;
					}
				}
			}
		}

		.main-list {
			flex: 1;
			overflow: hidden;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;

			.list-wrap {
				flex: 1;
				overflow: hidden;
			}

			.bind-phone {
				display: flex;
				flex-direction: column;
				align-items: center;

				.txt {
					margin: 20rpx 0;
					font-size: 28rpx;
				}

				&::v-deep {
					.u-button {
						padding: 10rpx 100rpx !important;
					}
				}
			}
		}
	}

	.kefu-modal {
		&::v-deep {
			.u-modal__title {
				padding-top: 30rpx;
			}

			.u-modal__content {
				padding: 30rpx !important;
				overflow: hidden !important;

				.slot-content {
					width: 100%;

					.content {
						text-align: center;
						line-height: 38rpx;
						color: #5e5e5e;

						&>view {
							padding: 0 10%;
						}

						.uni-icons {
							margin-right: 10rpx;
						}
					}
				}
			}
		}
	}

	.bind-modal {
		&::v-deep {
			.u-modal__title {
				padding-top: 30rpx;
			}

			.u-modal__content {
				padding: 30rpx !important;
				overflow: hidden !important;

				.slot-content {
					width: 100%;
				}

				.form-group {
					padding: 0 60rpx 0 40rpx;

					.uni-forms-item {
						margin-bottom: 30rpx;

						.uni-forms-item__content {
							border-radius: 50rpx;
							background-color: #f5f6f7;
							display: flex;
							align-items: center;
							padding: 5rpx 24rpx;
						}
					}

					.code-box {
						.login-code {
							margin-left: 20rpx;
							margin-right: -20rpx;
						}

						.login-code-img {
							height: 78rpx;
							width: 200rpx;
							margin-top: 2rpx;
						}
					}
				}

				.form-btn-box {
					padding: 30rpx 30rpx 10rpx;
				}
			}
		}
	}
</style>